<template>
  <div id="user" v-if="currentLoginUser">
    <van-cell title="用户名" is-link to="/user/edit" :value="currentLoginUser.username"
              @click="handleEdit('username', '用户名', currentLoginUser.username)"/>
    <van-cell title="账号" is-link :value="currentLoginUser.userAccount"/>
    <van-cell title="头像" is-link to="/user/edit" :value="currentLoginUser.avatarUrl"  @click="handleEdit('avatarUrl', '头像', currentLoginUser.avatarUrl)">
      <van-uploader v-model="newAvatarUrl" reupload max-count="1"/>
    </van-cell>
    <van-cell title="个人描述" is-link to="/user/edit" :value="currentLoginUser.profile"
              @click="handleEdit('profile', '个人描述', currentLoginUser.profile)"/>
    <van-cell title="性别" is-link :value="currentLoginUser.gender === 0 ? '男' : '女'"
              @click="handleEdit('gender', '性别', currentLoginUser.gender)"/>
    <van-cell title="电话" is-link to="/user/edit" :value="currentLoginUser.phone "
              @click="handleEdit('phone', '电话', currentLoginUser.phone)"/>
    <van-cell title="邮箱" is-link to="/user/edit" :value="currentLoginUser.email"
              @click="handleEdit('email', '邮箱', currentLoginUser.email)"/>
    <van-cell value="添加" is-link to="/user/edit" @click='handleEdit("tags", "标签", currentLoginUser.tags || `[""]`)'>
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">标签</span>
        <van-tag round type="primary" style="margin: 5px" v-for="tag in JSON.parse(currentLoginUser.tags)">{{ tag }}
        </van-tag>
      </template>
    </van-cell>
    <van-cell title="星球编号" is-link :value="currentLoginUser.planetCode"/>
    <van-cell title="注册时间" is-link>
     {{dayjs(currentLoginUser.createTime).format('YYYY-MM-DD HH:mm:ss')}}
    </van-cell>
  </div>
</template>

<script setup lang="ts">
import router from "../../router";
import {onMounted, ref} from "vue";
import request from "../../plugins/request.ts";
import {useUserStore} from "../../stores";
import dayjs from "dayjs";

const userStore = useUserStore()
const currentLoginUser = ref()
const newAvatarUrl = ref([
  {url: 'https://q6.itc.cn/q_70/images03/20240527/b7a98963946e4162938b868807b5ac21.jpeg'},
])
onMounted(async () => {
  const result = await request.get('/user/current')
  if (result.data.data) {
    currentLoginUser.value = result.data.data
    userStore.setCurrentLoginUser(currentLoginUser.value)
    newAvatarUrl.value[0].url = result.data.data.avatarUrl
  }
})
/**
 * 处理个人信息编辑
 * @param editKey
 * @param editName
 * @param currentValue
 */
const handleEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      'id': currentLoginUser.value.id,
      editKey,
      editName,
      currentValue,
    }
  })
}
</script>

<style scoped>

</style>